<!DOCTYPE html>

<html lang="en">
<head>
  <script type="text/javascript">
function showResult(str)
  {
  if (str.length==0)
  { 
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";

  return;
  }
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","uniprot.php?q="+str,true);
  xmlhttp.send();
  }
  function showResult_names(str_p)
  {
  if (str_p.length==0)
  { 
  document.getElementById("livesearch_p").innerHTML="";
  document.getElementById("livesearch_p").style.border="0px";

  return;
  }
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch_p").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch_p").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","uniprot.php?t=name&q="+str_p,true);
  xmlhttp.send();
  }
  </script>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title>BioMine</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content=""><!-- Le styles -->
  <link href="./css/bootstrap.css" rel="stylesheet" type="text/css">
  <style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
  </style>
  <link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css"><!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]--> 
  <!-- Le fav and touch icons -->
  <link rel="shortcut icon" href="./assets/ico/favicon.ico">
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./assets/ico/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="./assets/ico/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./assets/ico/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="./assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<body>
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> <a class="brand" href="biomine.html">BioMine-&gt;</a>

        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="biomine.html">Home</a></li>

            <li><a href="#about">Search</a></li>

            <li><a href="#contact">Download</a></li>

            <li><a href="#contact">BLAST</a></li>

            <li><a href="#contact">Align</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

  <div class="container">
    <!-- Main hero unit for a primary marketing message or call to action -->

    <div class="hero-unit">
      <h1>Welcome to BioMine</h1>

      <p>The database for biomineralization proteins.</p>

      <p><a class="btn btn-primary btn-large">Learn more »</a></p>
    </div>

    <form class="well form-search" action="uniprot.php?q=" method="get">
      <div class="row">
        <div class="span4">
          <label>Search by species</label> <input type="text" class="input-medium search-query" name="q" onkeyup="showResult(this.value)"> <button type="submit" class="btn">Search</button>
        	        </div>
      </div>
      
    </form>

    <div class="alert alert-info" id="livesearch"></div>
  </div><!--<div class="alert alert-info" id="livesearch"></div>-->

  <div class="span4">
    <label>Search by Protein name</label> <input type="text" class="input-medium search-query" onkeyup="showResult_names(this.value)"> <button type="submit" class="btn">Search</button>

    <div class="alert alert-info" id="livesearch_p"></div>
  </div><!-- Example row of columns -->

  <div class="row">
    <div class="span4">
      <!--<span class="badge badge-success">1</span> -->

      <h2>New Proteins added</h2>

      <p>Here find a list of newly added proteins</p>

      <p><a class="btn" href="#">View details »</a></p>
    </div>

    <div class="span4">
      <h2>How BioMine Works?</h2>

      <p>BioMine, is a database and search tool that tries to put all biomineralization related proteins in one place to help scientists identify new proteins</p>

      <p><a class="btn" href="#">View details »</a></p>
    </div>

    <div class="span4">
      <h2>Add your sequences</h2>

      <p>Use our submission form to submit sequences to the database</p>

      <p><a class="btn" href="#">View details »</a></p>
    </div>
  </div>
  <hr>

  <p>© University of California Regents</p><!-- /container -->
  <!-- Le javascript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="./js/jquery.js" type="text/javascript">
</script><script src="./js/bootstrap-transition.js" type="text/javascript">
</script><script src="./js/bootstrap-alert.js" type="text/javascript">
</script><script src="./js/bootstrap-modal.js" type="text/javascript">
</script><script src="./js/bootstrap-dropdown.js" type="text/javascript">
</script><script src="./js/bootstrap-scrollspy.js" type="text/javascript">
</script><script src="./js/bootstrap-tab.js" type="text/javascript">
</script><script src="./js/bootstrap-tooltip.js" type="text/javascript">
</script><script src="./js/bootstrap-popover.js" type="text/javascript">
</script><script src="./js/bootstrap-button.js" type="text/javascript">
</script><script src="./js/bootstrap-collapse.js" type="text/javascript">
</script><script src="./js/bootstrap-carousel.js" type="text/javascript">
</script><script src="./js/bootstrap-typeahead.js" type="text/javascript">
</script>
</body>
</html>
